<template>
  <div>
    <tableHeader />
    <!-- 机柜详情 -->
    <el-card class="business_info-card lg-mb-20">
      <el-tabs
        type="border-card"
        v-model="activeName"
        class="demo-tabs"
        @tab-click="handleClick"
      >
        <el-tab-pane label="机柜详情" name="Infomation">
          <Info ref="InfoRef" />
        </el-tab-pane>
        <el-tab-pane label="历史数据" name="History">
          <HistoryContainer v-if="state.tabPane.HistoryShow" ref="HistoryRef" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { provide, reactive, onMounted, ref } from "vue";
import { DictOperation } from "@/utils/common"; // 导入表格api方法生成器
import { useRouter } from "vue-router";
import tableHeader from "./tableHeader.vue";
import { useBusiness } from "@/store/backend/BusinessM/info";
import Info from "./Info.vue";
import HistoryContainer from "./historyComponents/index.vue";
import { useAssetCabinet } from "@/store/backend/Assets/cabinet";
import { useNavTabs } from "@/store/navTabs";
import type { TabsPaneContext } from "element-plus";
import { useWarningItemObject } from "@/store/backend/Warning/itemObject";

const navTabs = useNavTabs();
const router = useRouter();
const business = useBusiness();
const cabinet = useAssetCabinet();
const itemObject = useWarningItemObject();

//初始化字典处理类
const dictOperation = new DictOperation();

const InfoRef = ref(); //详情页面
const HistoryRef = ref(); //历史页面

const state: {
  objectOptions: anyObj[];
  currentTabName: string;
  tabPane: anyObj;
} = reactive({
  objectOptions: [], //告警对象列表
  currentTabName: "",
  tabPane: {
    HistoryShow: false,
  },
});

//当前标签页
const activeName = ref("Infomation");
//标签页点击切换
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log("tab 被选中时触发", tab.paneName, event);
  //保存当前标签页名称
  state.currentTabName = tab.paneName as string;

  //历史数据模块
  if (tab.paneName == "History") {
    state.tabPane.HistoryShow = true;
  } else {
    state.tabPane.WorkOrderShow = false;
  }
};

interface anyObj {
  [key: string]: any;
}

//判断字典值
const getDictionaryValue = (val: any) => {
  return cabinet.tags["cabinetType"][val];
};

//获取告警对象列表
const getobjectList = () => {
  itemObject
    .getWarningItemObjectList({ pageSize: 10000 })
    .then((res: any) => {
      state.objectOptions = res;
      itemObject.fullData = res; //所有告警对象数据存储至仓库
    })
    .catch((err: any) => {});
};

onMounted(() => {
  getobjectList(); //获取告警对象列表
});

provide("navTabs", navTabs);
provide("cabinet", cabinet);
provide("itemObject", itemObject);
provide("dictOperation", dictOperation);
</script>
<style lang="scss" scoped>
.business_info {
  &-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .business_devices-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.el-descriptions {
  margin: 20px 0;
}
.cell-item {
  display: flex;
  align-items: center;
}
.lg-mb-20 {
  margin-bottom: 20px;
}
</style>
